<!--
 * @Descripttion: 手机组件编辑
 * @version: V1.0
 * @Author: GW
 * @Date: 2021-09-09 13:59:48
 * @LastEditors: GW
 * @LastEditTime: 2021-09-18 15:31:57
-->
<template>
    <section class="edit-wrapper">
        <p>标题</p>
        <a-input v-model="data.title" read-only maxLength="16"></a-input>
        <a-divider></a-divider>
        <!-- <a-checkbox v-model="data.onFill">是否必填</a-checkbox>
        <a-divider></a-divider> -->
        <p>可输入的最大长度</p>
        <a-input-number class="input-number" v-model="data.maxLength" placeholder="可输入的最大长度"></a-input-number>
        <a-divider></a-divider>
        <a-checkbox :checked="isSms" @change="checkPhone">是否发送验证码</a-checkbox>
    </section>
</template>

<script>
export default {
    props: {
        data: {
            type: Object,
            default: {}
        },
    },
    data () {
        return {
            isSms: this.data.isSms == 1 ? true : false,
        }
    },
    methods: {
        checkPhone (val) {
            this.isSms = val.target.checked
            this.data.isSms = this.isSms ? 1 : 0;
        }
    }
}
</script>

<style lang="less" scoped>
    .edit-wrapper {
        padding: 10px 10px 28px;
        .input-number {
            width: 100%;
        }
    }
</style>